<template>
    <div class="form-setting">
        <a-form ref="formSettingRef" name="setting" layout="vertical" :model="curWidget">
            <template v-for="(type,index) in typeMapEditor" :key="index">
                <component
                    v-if="isShowEditor(index)"
                    :is="type"
                    :designer="designer"
                    :curWidget="curWidget"
                />
            </template>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { fetchCompModule, initWidget } from '@/utils/component';
import type { BaseWidgetType, DesignerType } from '@/xyFDesigner/type';
import { onBeforeMount, ref, useTemplateRef, type Ref } from 'vue';
import { typeMapEditor } from './setting';
import type { FormInstance } from 'ant-design-vue';

const props = withDefaults(defineProps<{
    designer:DesignerType,
    curWidget:Ref<BaseWidgetType | null>
}>(),{})

const formSettingRef = ref<FormInstance>()

const isShowEditor = (type:number)=>{
    if(props.curWidget.value == null) return false
    if(!Reflect.has(props.curWidget.value.options,type)) return false
    return true
}

const init = ()=>{
    const modules:Record<string,{default:string}> = import.meta.glob('./components/**',{eager:true})
    for (const key in typeMapEditor) {
        const type = typeMapEditor[key]
        const module = fetchCompModule(type,modules) as string
        initWidget(type,module)
    }
}

const validateFormSetting = async()=>{
    const res = await formSettingRef.value?.validate()
    return res
}


defineExpose({
    validateFormSetting,
    initComp:init
})
</script>

<style lang='scss' scoped>
:deep(.ant-form-item){
    margin: 0;
    margin-bottom: 5px;
}
.form-setting {
    height: calc(100vh - 80px);
    background-color: #fff;
    user-select: none;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 5px;

    &::-webkit-scrollbar {
        width: 6px;
        background: transparent;
        opacity: 0;
        transition: opacity 0.3s;
    }

    &:hover::-webkit-scrollbar {
        opacity: 1;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
        border-radius: 4px;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    &:hover::-webkit-scrollbar-thumb {
        background-color: #a19e9e;

        &:hover {
            background-color: #ccc;
        }
    }
}
</style>